<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>AIGC应用展示平台</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../assets/vendors/feather/feather.css">
    <link rel="stylesheet" href="../assets/vendors/mdi/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="../assets/vendors/ti-icons/css/themify-icons.css">
    <link rel="stylesheet" href="../assets/vendors/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/vendors/typicons/typicons.css">
    <link rel="stylesheet" href="../assets/vendors/simple-line-icons/css/simple-line-icons.css">
    <link rel="stylesheet" href="../assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <link rel="stylesheet" href="../assets/vendors/datatables.net-bs4/dataTables.bootstrap4.css">
    <link rel="stylesheet" type="text/css" href="../assets/js/select.dataTables.min.css">
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../assets/css/style.css">
    <!-- endinject -->
    <link rel="shortcut icon" href="../assets/images/favicon.png" />

  </head>
  <body class="with-welcome-text">
      <!-- partial:partials/_navbar.html -->
      <nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex align-items-top flex-row">
        <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start">
          <div class="me-3">
            <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-bs-toggle="minimize">
              <span class="icon-menu"></span>
            </button>
          </div>
          <div>
            <a class="navbar-brand brand-logo" href="index-page.php">
              AIGC应用
            </a>
            <a class="navbar-brand brand-logo-mini" href="index-page.php">
              <img src="../assets/images/logo-mini.svg" alt="logo" />
            </a>
          </div>
        </div>
        <div class="navbar-menu-wrapper d-flex align-items-top">
          <ul class="navbar-nav">
            <li class="nav-item fw-semibold d-none d-lg-block ms-0">
              <h1 class="welcome-text">欢迎来到, <span class="text-black fw-bold">AI应用展示平台</span></h1>
            </li>
          </ul>
          <ul class="navbar-nav ms-auto">
              <li class="nav-item">
                  <form id="searchForm" method="POST" class="d-flex align-items-center">
                      <i class="fa fa-search" style="font-size: 24px; margin-right: 8px;"></i>
                      <div class="input-group">
                          <input type="text" class="form-control" id="search" placeholder="搜索人工智能应用" aria-label="搜索" aria-describedby="searchButton">
                      </div>

                  </form>
                  <!-- 搜索结果显示区域 -->
                  <div class="dropdown-menu" id="searchResults" aria-labelledby="searchButton" style="max-height: 300px; overflow-y: auto;">
                      <!-- 搜索结果将动态加载到此区域 -->
                  </div>
              </li>
          </ul>
        </div>
      </nav>
      <!-- partial -->
      <div class="container-fluid page-body-wrapper">
        <!-- partial:partials/_sidebar.html -->
        <nav class="sidebar sidebar-offcanvas" id="sidebar">
          <ul class="nav">
            <li class="nav-item">
              <a class="nav-link" href="index-page.php">
                <i class="mdi mdi-grid-large menu-icon"></i>
                <span class="menu-title">首页</span>
              </a>
            </li>

<!--            <li class="nav-item">-->
<!--              <a class="nav-link" data-bs-toggle="collapse" href="#ui-basic" aria-expanded="false" aria-controls="ui-basic">-->
<!--                <i class="menu-icon mdi mdi-floor-plan"></i>-->
<!--                <span class="menu-title">AI应用</span>-->
<!--                <i class="menu-arrow"></i>-->
<!--              </a>-->
<!--              <div class="collapse" id="ui-basic">-->
<!--                <ul class="nav flex-column sub-menu">-->
<!--                  <li class="nav-item"> <a class="nav-link" href="ui-features/buttons.html">AI绘画</a></li>-->
<!--                  <li class="nav-item"> <a class="nav-link" href="ui-features/dropdowns.html">AI视频</a></li>-->
<!--                  <li class="nav-item"> <a class="nav-link" href="ui-features/typography.html">AI大模型</a></li>-->
<!--                </ul>-->
<!--              </div>-->
<!--            </li>-->
          </ul>
        </nav>
        <!-- partial -->
        <div class="main-panel">
          <div class="content-wrapper">
              <div class="row">
                  <?php include('../index.php'); ?>
                  <?php
                  if (isset($apps) && count($apps) > 0) {
                      foreach ($apps as $app) {
                          echo '
                    <div class="col-md-4">
                        <div class="card">
                            <div class="card-body d-flex align-items-center">
                                <!-- Logo  -->
                                <img src="' . $app['logo'] . '" class="rounded-circle" alt="' . $app['appname'] . ' Logo" style="width: 50px; height: 50px; object-fit: cover; margin-right: 15px;">
                                
                                <!-- 文本信息 -->
                                <div>
                                    <h5 class="card-title">' . $app['appname'] . '</h5>
                                    <p class="card-text">' . $app['info'] . '</p>
                                    <a href="detail-page.php?appid=' . $app['appid'] . '" class="btn btn-sm btn-primary">查看详情</a>
                                  
                                </div>
                            </div>
                        </div>
                    </div>';
                      }
                  } else {
                      echo '<p>没有应用可显示。</p>';
                  }
                  ?>
              </div>

          </div>
          <!-- content-wrapper ends -->
          <!-- partial:partials/_footer.html -->
          <footer class="footer">
            <div class="d-sm-flex justify-content-center justify-content-sm-between">
              <span class="text-muted text-center text-sm-left d-block d-sm-inline-block"></span>
              <span class="float-none float-sm-end d-block mt-1 mt-sm-0 text-center">Copyright © 2024 AIGC应用展示平台. All rights reserved.</span>
            </div>
          </footer>
          <!-- partial -->
        </div>
        <!-- main-panel ends -->
      </div>
      <!-- page-body-wrapper ends -->
    <!-- container-scroller -->
    <!-- plugins:js -->
    <script src="../assets/vendors/js/vendor.bundle.base.js"></script>
    <script src="../assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page -->
    <script src="../assets/vendors/chart.js/chart.umd.js"></script>
    <script src="../assets/vendors/progressbar.js/progressbar.min.js"></script>
    <!-- End plugin js for this page -->
    <!-- inject:js -->
    <script src="../assets/js/off-canvas.js"></script>
    <script src="../assets/js/template.js"></script>
    <script src="../assets/js/settings.js"></script>
    <script src="../assets/js/hoverable-collapse.js"></script>
    <script src="../assets/js/todolist.js"></script>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="../assets/js/jquery.cookie.js" type="text/javascript"></script>
    <script src="../assets/js/dashboard.js"></script>
      <script>
          $(document).ready(function() {
              // 当搜索框的输入内容发生变化时
              $('#search').on('input', function() {
                  var searchKeyword = $(this).val(); // 获取用户输入的搜索词

                  if (searchKeyword.length > 0) {
                      // 发送AJAX请求到后端
                      $.ajax({
                          url: '../search.php', // 后端PHP文件
                          method: 'POST',
                          data: { search: searchKeyword },
                          dataType: 'json',
                          success: function(response) {
                              // 处理返回的数据并显示
                              if (response.success && response.data.length > 0) {
                                  var resultsHtml = '';
                                  response.data.forEach(function(app) {
                                      resultsHtml += `
                                <a href="detail-page.php?appid=${app.appid}" class="dropdown-item" style="cursor: pointer;">
                                    ${app.appname}
                                </a>
                            `;
                                  });
                                  $('#searchResults').html(resultsHtml); // 更新显示的结果
                                  $('#searchResults').dropdown('show'); // 显示下拉菜单
                              } else {
                                  $('#searchResults').html('<p class="dropdown-item">没有找到匹配的应用。</p>');
                              }
                          },
                          error: function() {
                              $('#searchResults').html('<p class="dropdown-item">搜索过程中出现错误，请重试。</p>');
                          }
                      });
                  } else {
                      // 如果搜索框为空，清空搜索结果
                      $('#searchResults').html('');
                  }
              });
          });

      </script>
    <!-- <script src="assets/js/Chart.roundedBarCharts.js"></script> -->
    <!-- End custom js for this page-->
  </body>
</html>